<style lang="less" scoped>
    .cardtable {
        width: 100%;
        height: auto;
        .mcard{
            text-align: left;
            position: relative;
            .title{
                display: flex;
                justify-content: space-between;
                align-items: center;
                .titletext{
                    width: auto;
                    margin-right: 20px;
                }
            }
        }
    }
</style>
<template>
    <div class="cardtable">
        <Card class="mcard" :bordered="false">
            <div slot="title" class="title">
                <p class="titletext">{{ cardtitle }}</p>
                <search-base
                    v-show="search"
                    :selectList="selectList"
                    :defaultSelete="defaultSelete"
                    :placeholder="placeholder"
                    @searchBase="rearch"
                    style="width: 360px">
                </search-base>
                <div style="flex-grow: 1"></div>
                <slot></slot>
                <div class="cardright">
                    <Button type="text" v-show="gjssbtn" @click="advancedSearch">{{ search ? '高级搜索' : '普通搜索' }}</Button>
                    <Button type="default" icon="loop" @click="refresh"></Button>
                    <slot name="button"></slot>
                    <Button v-show="addbtn" type="default" icon="plus-round" @click="add">{{ addbuttext }}</Button>
                </div>
            </div>
            <high-search
                :formItem="formItem"
                :searchForm="searchForm"
                @highSearch="rearch"
                @reset="reset"
                v-show="!search">
            </high-search>
            <table-page v-if="table == '1'" :columns="columns" :data="dataClone2" @on-current-change="onCurrentChange" :loading="loading">
                <slot name="head" slot="tablehead"></slot>
                <slot name="bottom">
                </slot>
            </table-page>
            <table-page-elm v-else-if="table == '2'" :columns="columns" :data="dataClone2" @on-current-change="onCurrentChange">
                <slot name="elmtable"  slot="elmtable"></slot>
            </table-page-elm>
        </Card>
    </div>
</template>
<script>
    import SearchBase from '../search_components/searchBase.vue'
    import TablePage from '../components/tablePage.vue'
    import TablePageElm from '../components/tablePageElm.vue'
    import HighSearch from '../search_components/highSearch.vue'
    export default {
        name: 'cardtable',
        props: {
            table: {
                type: String,
                default: '1'
            },
            addbtn: {  //  添加按钮
                type: Boolean,
                default: true
            },
            gjssbtn: {  //  高级搜索按钮
                type: Boolean,
                default: true
            },
            cardtitle: {   //  卡片标题
              type: String,
              default: ''
            },
            addbuttext: {  //  添加按钮文字
                type: String,
                default: ''
            },
            columns: {   //  table表头
                type: Array,
                default: () => {
                    return []
                }
            },
            data: {  //  table数据
                type: Array,
                default: () => {
                    return []
                }
            },
            loading: {  // table的loading状态
                type: Boolean,
                default: false
            },
            selectList: {  //  搜索下拉列表项
                type: Array,
                default: () => {
                    return []
                }
            },
            defaultSelete: {  //  默认的搜索项
                type: String,
                default: ''
            },
            placeholder: {  //  搜索框内的默认值
                type: String,
                default: '请输入关键字搜索'
            },
            formItem: {
                type: Array,
                default: () => {
                    return []
                }
            },
            searchForm: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        data () {
            return {
                dataClone2: this.dataClone,
                search: true
            };
        },
        watch: {
            dataClone: (val) => {  // 监听器调用计算属性   搜索临时解决方案
                console.log(val, 'watch')
            }
        },
        computed: {
           dataClone () {
                console.log(JSON.parse(JSON.stringify(this.data)))
                this.dataClone2 = JSON.parse(JSON.stringify(this.data))
                return JSON.parse(JSON.stringify(this.data))
           }
        },
        methods: {
            rearch (argumentObj) {
                let res = this.data;
                let dataClone = this.data;
                for (let argu in argumentObj) {
                    if (argumentObj[argu].length > 0) {
                        res = dataClone.filter(d => {
                            let filt = argu.split('-')
                            let filtdata = d[filt[0]]
                            if (this.util.isArray(filtdata)) {   //  数组遍历方法
                                for (let i = 0; i < filtdata.length; i++) {
                                    let data = filtdata[i]
                                    for (let a = 1; a < filt.length; a++) {
                                        data = filtdata[i][filt[a]]
                                    }
                                    if (data.indexOf(argumentObj[argu]) > -1) {
                                        return true
                                    }
                                }
                                return
                            }
                            for (let i = 1; i < filt.length; i++) {
                                filtdata = filtdata[filt[i]]
                            }
                            return filtdata.indexOf(argumentObj[argu]) > -1;
                        });
                        dataClone = res;
                    }
                }
                this.dataClone2 = res;
            },
            reset () {
                this.dataClone = this.data
            },
            advancedSearch () { //  高级搜索普通搜索切换按钮
                this.search = !this.search
            },
            refresh () {
                console.log('刷新')
                this.$emit('refresh')
            },
            add () {
                console.log('添加')
                this.$emit('add')
            },
            onCurrentChange (current) {
                this.$emit('on-current-change', current)
            }
        },
        components: {
            SearchBase,
            TablePage,
            HighSearch,
            TablePageElm
        },
        mounted: function () {
        }
    };
</script>
